<template>
	<view>
		<ym-navbar :immersive="true"><view class="nav-title" slot="center">优惠券</view></ym-navbar>
		<view class="header">
			<image class="logo" src="../static/wxImage/bg-logo.png" mode="widthFix"></image>
			<image class="bg1 fadeIn" src="../static/wxImage/bg-shareCup2.png" mode="widthFix"></image>
			<image class="text" src="../static/wxImage/text-hdyhq.png" mode="widthFix"></image>
			<view class="tip" v-if="nickName">
				来自好友
				<text style="color: #FFE164;margin:0 10rpx;">{{ nickName }}</text>
				分享的优惠券
			</view>
			<image class="tip2" src="../static/wxImage/bg-dkxj.png" mode="widthFix"></image>
		</view>
		<view class="body">
			<view class="label u-f-ajc">优惠券</view>
			<view class="coupon-wrap">
				<view class="coupon fadeIn" v-if="couponInfo">
					<image class="coupon-bg" src="../static/wxImage/bg-coupon1.png" mode="widthFix"></image>
					<view class="content">
						<view class="content-l u-f-ajc">
							<text>{{ couponInfo.couponAmount }}</text>
						</view>
						<view class="content-r">
							<view>{{ couponInfo.couponInfo }}</view>
							<view>
								加注满
								<text style="color: #FFE165;font-size: 32rpx;margin: 0 6rpx;">{{ couponInfo.couponOrderAmount }}</text>
								可用
							</view>
							<view class="time">领取后的{{ couponInfo.validityDays }}天内有效</view>
						</view>
					</view>
				</view>
				<view v-else style="color: #FFFFFF;">优惠券已被领取！</view>
			</view>
			<view class="btn u-f-ajc"><button type="default" @tap="getTheCoupon">立即领取</button></view>

			<!-- 领取优惠券弹窗 -->
			<get-coupon ref="getCoupon"></get-coupon>

			<!-- 登录提示 -->
			<sign-in @submit="queryMacCode"></sign-in>
		</view>
	</view>
</template>

<script>
import ymNavbar from '@/components/ym-navbar/ym-navbar.vue';
import getCoupon from '@/components/popup/get-coupon.vue';

export default {
	components: { ymNavbar, getCoupon },
	data() {
		return {
			nickName: '', // 分享者的昵称
			couponInfo: '',
			couponAmount: '',
			couponOrderAmount: ''
		};
	},
	onLoad(options) {
		console.log(options);
		this.recordCode = options.recordCode;
		this.nickName = options.nickName;
		this.friendId = options.friendId;
		uni.$on('loginSuc', this.getAccoupon);
	},
	onUnload() {
		uni.$off('loginSuc');
	},
	methods: {
		// 领取优惠券
		async getTheCoupon() {
			if (!this.couponInfo) return;
			this.$http({
				url: this.$api.accoupon + 'getCoupon',
				data: {
					recordCode: this.recordCode,
					couponId: this.couponInfo.id,
					couponType: 2, // 1 是加注券领取
					userId: this.$store.state.userId,
					forwardUserId: this.friendId
				}
			}).then(async res => {
				await subscribeMsg();
				this.$refs.getCoupon.open();
				console.log('res', res);
			});
		},
		// 获取活动优惠券列表信息
		getAccoupon() {
			if (!this.recordCode) return;
			this.$http({
				url: this.$api.accoupon + 'getShopCouponList',
				data: {
					recordCode: this.recordCode
				}
			}).then(res => {
				if (Array.isArray(res) && res.length) {
					this.couponInfo = res[0];
				}
				console.log('res', res);
			});
		},
		// 订阅模板消息
		subscribeMsg() {
			// 优惠券到账 noLo9jvRO1v4vpH1gTaAL9TfsYhdO2dq-GK3GvTyNBE
			return new Promise((resolve, reject) => {
				uni.requestSubscribeMessage({
					tmplIds: ['noLo9jvRO1v4vpH1gTaAL9TfsYhdO2dq-GK3GvTyNBE'],
					complete: () => {
						uni.showLoading({
							title: '加载中'
						});
						resolve();
					}
				});
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #5555f1;
}

::v-deep .u-mode-center-box {
	background: rgba(0, 0, 0, 0) !important;
}
.nav-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #ffffff;
}
.header {
	position: relative;
	.logo {
		width: 100vw;
		height: 79rpx;
		position: absolute;
		top: 160rpx;
	}
	.bg1 {
		width: 100vw;
		height: 840rpx;
	}
	.text {
		position: absolute;
		top: 260rpx;
		z-index: 100;
		width: 485rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	.tip {
		position: absolute;
		top: 420rpx;
		z-index: 100;
		left: 50%;
		line-height: 48rpx;
		height: 50rpx;
		padding: 0 20rpx;
		transform: translateX(-50%);
		text-align: center;
		color: #ffffff;
		border: 1rpx solid #ffffff;
		border-radius: 30rpx;
		font-size: 22rpx;
		white-space: nowrap;
	}
	.tip2 {
		position: absolute;
		top: 500rpx;
		z-index: 100;
		left: 50%;
		width: 663rpx;
		height: 374rpx;
		transform: translateX(-50%);
		text-align: center;
		color: #ffffff;
	}
}
.body {
	padding-top: 100rpx;
	.label {
		color: #ffe165;
		font-size: 30rpx;
		font-weight: bold;
		position: relative;

		&::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 150rpx;
			transform: translateY(-50%);
			background: url(../static/wxImage/icon-line.png);
			background-repeat: no-repeat;
			background-size: 122rpx 22rpx;
			z-index: 100;
			width: 122rpx;
			height: 22rpx;
		}

		&::after {
			content: '';
			position: absolute;
			top: 50%;
			right: 150rpx;
			background: url(../static/wxImage/icon-line.png);
			background-repeat: no-repeat;
			background-size: 122rpx 22rpx;
			z-index: 100;
			width: 122rpx;
			height: 22rpx;
			transform: translateY(-50%) rotateZ(180deg);
		}
	}

	.coupon-wrap {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 60rpx;

		.coupon {
			width: 690rpx;
			position: relative;
			height: 180rpx;
			.coupon-bg {
				width: 690rpx;
				position: absolute;
			}
			.content {
				position: absolute;
				z-index: 100;
				width: 690rpx;
				height: 180rpx;
				display: flex;
				flex-direction: row;

				.content-l {
					width: 260rpx;
					font-size: 90rpx;
					color: #5657f0;
					display: flex;
					align-items: center;

					text {
						font-family: 'Times New Roman', serif;
						position: relative;
						background-image: -webkit-linear-gradient(bottom, #5657f0, #8c90ff);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
					> text:not(:nth-child(2)) {
						font-weight: bold;
					}
					> text:nth-child(1)::after {
						content: '';
						position: absolute;
						right: -20rpx;
						bottom: 10rpx;
						width: 38rpx;
						height: 38rpx;
						background: url(../static/wxImage/icon-money2.png);
						background-repeat: no-repeat;
						background-size: 38rpx;
						height: 38rpx;
					}
					> text:nth-child(2) {
						margin: 0 26rpx;
						font-size: 46rpx;
					}
				}
				.content-r {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-content: center;
					flex: 1;
					overflow: hidden;
					padding-left: 80rpx;

					> view {
						color: #ffffff;
					}

					.time {
						font-size: 22rpx;
					}
				}
			}
		}
	}

	.btn {
		position: relative;
		margin-top: 80rpx;
		button {
			width: 400rpx;
			height: 108rpx;
			line-height: 100rpx;
			background: linear-gradient(0deg, #3432c6, #5e5ef5);
			border-radius: 60rpx;
			color: #ffffff;
			box-sizing: content-box;
			border: 4rpx solid #ffffff;
			font-size: 44rpx;
			position: relative;
			box-shadow: 0rpx 0rpx 100rpx 1rpx rgba(255, 255, 255, 0.6);
			-webkit-animation-name: zoom;
			-webkit-animation-duration: 5s;
		}
		&::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 100rpx;
			width: 25rpx;
			height: 25rpx;
			background: url(../static/wxImage/icon-cube.png);
			background-repeat: no-repeat;
			background-size: 25rpx 25rpx;
			z-index: 100;
			transform: translateY(-50%);
		}
		&::after {
			content: '';
			position: absolute;
			top: 50%;
			right: 100rpx;
			width: 25rpx;
			height: 25rpx;
			background: url(../static/wxImage/icon-cube.png);
			background-repeat: no-repeat;
			background-size: 25rpx 25rpx;
			z-index: 100;
			transform: translateY(-50%);
		}
	}
}
</style>
